<template>
  <div class="search">
    <div class="main-left">
    <span>输入搜索</span>
    <el-input
        
        placeholder="输入课程ID"
        v-model="keyword"
        clearable>
    </el-input>
    </div>
    <div class="main-right">
    <span>上次消费时间</span>
    <el-date-picker
      v-model="value1"
      type="daterange"
      range-separator="▼"
      start-placeholder="开始日期"
      end-placeholder="结束日期">
    </el-date-picker>
    <el-button type="primary" plain @click = 'searchHander'>查询</el-button>
    <el-button plain @click ="resethandler">重置</el-button>
    <el-dropdown trigger="click">
      <span class="el-dropdown-link">
        <i class="el-icon-arrow-down el-icon--right"></i>高级筛选
      </span>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item ><input type="checkbox">上架</el-dropdown-item>
        <el-dropdown-item ><input type="checkbox">下架</el-dropdown-item>
        <el-dropdown-item ><input type="checkbox">上传人</el-dropdown-item>
        <el-dropdown-item ><input type="checkbox">课程名称</el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
    </div>
  </div>
</template>

<script>
// import eventBus from "../../../utils/eventBus"
export default {
    data() {
      return {
        keyword: '',
        value1: '',
        }
    },
    methods: {
      resethandler(){
        this.keyword='';
        this.searchHander();
      },
      searchHander(){
        this.$emit('parentsearch',this.keyword)
      },
      handleClick() {
        alert('button click');
      }
    }
}
</script>

<style scoped rel="stylesheet/scss" lang="scss">
 .search{
    display: flex;
    justify-content: space-between;
    margin: 0 24px;
}
.el-input__inner{
    height:32px;
    width:130px;
    margin-left: 5px;
 }
span {
      font-weight: bold;
      // line-height: 64px;
 }
 span[data-v-722a2cb0]{
  margin-right: 35px;
  width: 110px;
  line-height: 64px;
 }
 .el-input__inner{
  width: 310px;
  line-height:64px
 }
 .el-dropdown,
 .el-button{
  margin-left: 30px;
 }
 .main-right{
  margin-right: 138px;

 }
 .el-dropdown-link {
    cursor: pointer;
    color: #409EFF;
  }
  .el-icon-arrow-down {
    font-size: 12px;
  }
  .demonstration {
    display: block;
    color: #8492a6;
    font-size: 14px;
    margin-bottom: 20px;
  }
  .main-left{
    display: flex;
    align-items: center;
  }

</style>